Customizing Tailwind

Customizing responsive breakpoint modifier

overwrite old breakpoint modifier

module.exports = {
  darkMode: 'class',
  content: ['*.html'],
  theme: {
    screens: {
      'sm': '576px',
      'md': '960px',
      'lg': '1440px',
    }
 },
  plugins: []
}

Adding smaller breakpoints

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  darkMode: 'class',
  content: ['*.html'],
    theme: {
    screens: {
      'xs': '475px',
      ...defaultTheme.screens,
    },
  },
  plugins: []
}

Customizing Tailwind’s Theme Colors

Adding or replacing specific colors

const colors = require('tailwindcss/colors')
module.exports = {
  theme: {
    extend: {
      colors: {
        maroon: {
          50: '#e46464',
          100: '#d05050',
          200: '#bc3c3c',
          300: '#a82828',
          400: '#941414',
          500: '#800000',
          600: '#6c0000',
          700: '#580000',
          800: '#440000',
          900: '#300000'
        }, 
        indigo: {
          950: '#1d1a6d'
        },
        yellow: colors.yellow // use default colors
      }
    }
  }
}

Customizing Tailwind’s Spacing Utilities

discard the Tailwind utilities and replace them with our own

module.exports = {
  theme: {
    spacing: {
      sm: '8px',
      md: '12px',
      lg: '16px',
      xl: '24px',
    } 
  }
}

add customization spacing

module.exports = {
  theme: {
    extend: { // be careful of the 'extend' keywords
      spacing: {
        '13': '3.25rem',
        '15': '3.75rem',
        '128': '32rem',
        '144': '36rem',
      }
    }
  }
}

Customizing Tailwind’s core plugins

module.exports = {
  theme: {
    blur: {
      'none': 'blur(0)',
      'sm': 'blur(2px)',
      DEFAULT: 'blur(4px)',
      'md': 'blur(6px)',
      'lg': 'blur(8px)',
      'xl': 'blur(10px)'
    }
  }
}

<div class="blur-none bg-blue-500 text-white p-4">This has no blur.</div> 
<div class="blur-sm bg-blue-500 text-white p-4">This has a small blur.</div>
<div class="blur-md bg-blue-500 text-white p-4">This has a medium blur.</div>